<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">

	<style>
		.main-container {
			font-family: SF-UI-Text-Regular;
			width: 13cm;
			margin: 0 auto;
			padding: 20px;
			background-color: #D3D3D3;
		}

		.float-left {
			float: left;
		}

		.float-right {
			float: right;
		}

		.section {
			/*border: 1px solid #CCC;*/
			/*padding: 20px;*/
			padding-Top: 13px;
			margin-bottom: 16px;
			margin-Top: 20px;
		}

		.section-details p {
			color: #126089;
			/*font-size: 16px;*/
		}

		.grouper {
			overflow: hidden;
		}

		.grid-50 {
			width: 47%;
		}


		@font-face {
			font-family: 'SF-UI-Text-Regular';
			src: url("https://s3-ap-southeast-1.amazonaws.com/content.staging.whitecoat.global/PDF/Templates/fonts/SF-UI-Text-Regular.otf");
			font-style: normal;
		}

		h1 {
			font-size: 22px;
			font-family: 'SF-UI-Text-Regular';
		}

		.h1-main {
			margin-top: 90px;
		}

		p {
			margin: 0 0 10px 0;
			font-family: 'SF-UI-Text-Regular';
			font-size: 15px;
		}

		.p-spec {
			color: #149a9a;
			font-weight: bold;
		}



		.margin-b-30 {
			margin-bottom: 30px;
		}

	</style>
</head>
<body>
<div class="main-container">
	<div style="display:${data.visible!};margin-bottom: 10px">
		<p style='font-weight: bold'>${data.partnershipWithText!}</p>
		<img src="https://s3-ap-southeast-1.amazonaws.com/content.staging.whitecoat.global/PDF/Templates/Images/logo_whitecoat_v2.png">
	</div>
	<div style="background-color: #fff;padding: 20px;">
		<div class="main-header grouper">

			<div style="margin-bottom: 13px">
				<img style="max-width:250px;max-height: 150px;margin-bottom: 13px"  src="${data.doctorClinicLogo!}" class="float-left">
				<div class="float-right">
					<h1>${data.referralLetterText!}</h1>
				</div>
				<div style="padding-top: 13px; border-Top: 1px solid #D3D3D3;clear: both;display:${data.visiblePatientClinic!}"></div>
				<img  style="max-width:250px;max-height: 150px;display:${data.visiblePatientClinic!}" src="${data.patientClinicLogo!}">
			</div>

		</div>

		<div class="main-body">

			<div class="grouper">

				<div class="grouper" style="padding-top: 13px;border-Top: 1px solid #D3D3D3;">

					<div class="grid-30 float-left" style="margin-right: 15px;">
						<P>${data.idNoText!}:</P>
						<P>${data.nameText!}:</P>
						<P>${data.visitDateText!}:</P>
					</div>

					<div>
						<P><strong>${data.idNo!}</strong></P>
						<P><strong>${data.name!}</strong></P>
						<P><strong>${data.visitDate!}</strong></P>
					</div>

				</div>
				<div class="section" style="border-Top: 1px solid #D3D3D3;display:${data.visibleNoPatientClinic!}">
					<p><strong>${data.patientClinicName!}</strong><br>${data.patientClinicAddress!}</p>
				</div>
				<div class="section" style="border-Top: 1px solid #D3D3D3;">
					<p style="margin-bottom: 10px"><strong>${data.refDoctorName!}</strong><br>${data.medicineName!}</p>
					<p style="margin-bottom: 10px;"><strong>${data.clinicName!}</strong><br><span style='white-space: pre-line'>${data.address!}</span><br>${data.clinicPhone!}</p>
					<p style="margin-bottom: 10px;"><strong>${data.refDoctorNameComma!}</strong><br>${data.referralNote!}</p>
				</div>



				<div class="section" style="margin-bottom: 0px;">
					<p style="margin-bottom: 10px;">${data.KindRegardsText!},</p>
					<img style="margin-bottom: 10px;" src="${data.doctorSign!}" width="150"><br>
					<p style="margin-bottom: 0px;">${data.doctorName!}<br><span style="display:${data.visibleMCRNo!};">${data.MCRNoText!}: ${data.MCRNo!}</span></p>
				</div>

			</div>


		</div>

	</div>
	<div style="padding: 20px 0 0 20px;color: #696969">${data.doctorClinicAddress!}</div>
	<div style="padding: 20px 0 0 20px;color: #696969;display:${data.visiblePharmacyAddress!};">201 Henderson Road | Apex @ Henderson | #05-11/12 | Singapore 159545 | T: +65 6909 6609 | F: +65 6909 6606 | E: contactus@whitecoat.global</div>
</div>



</body>
</html>